<template>
  <div>
    <div
      :id="chartId"
      :style="{ height: '300px', width: '100%' }"
    />
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  export default {
    name: "Radar",
    props: {
      chartId: {
        type: String,
        default: "",
      },
      title: {
        type: String,
        default: "",
      },
      data: {
        type: Array,
        default: () => [],
      },
      points: {
        type: String,
        default: "",
      },
    },
    mounted() {
      if (this.data.length > 0) {
        this.drawChart();
      }
    },
    watch: {
      data(val) {
        if (val.length > 0) {
          this.drawChart();
        }
      },
    },
    methods: {
      drawChart() {
        let myChart = echarts.init(document.getElementById(this.chartId));
        myChart.setOption({
          title: {
            text: this.title,
            show: false,
          },
          tooltip: {
            show: false,
          },
          legend: {
            data: [this.title],
            show: false,
          },
          radar: {
            // shape: 'circle',
            name: {
              formatter: "{value}",
              textStyle: {
                color: "#666",
                padding: [3, 5],
              },
            },
            splitLine: {
              lineStyle: {
                width: 0
              }
            },
            splitArea: {
              areaStyle: {
                color: ['#0166B3', '#0095D9', '#2ABAF0', '#60CCF4', '#A8E3F9']
              }
            },
            indicator: this.data.map((_) => {
              return {
                name: _.item + (_.diff === 0 ? '' : (_.diff > 0 ? ' ↑' : ' ↓')),
                max: 100,
                color: _.diff === 0 ? '#333' : (_.diff > 0 ? '#089b04' : '#b93b04')
              };
            }),
          },
          series: [
          {
            name: "",
            type: "radar",
            // areaStyle: {normal: {}},
            data: [
            {
              name: this.title,
              value: this.data.map((item) => item.score),
            }, ],
          }, ],
        });
      },
    },
  };
</script>